<template>
  <ui-container class="trans-transaction-qry">
    <span class="header-tabs-title">{{ headerTitle }}</span>
    <ui-tabs v-model="activeName" type="card" @tab-click="handleClick" class="title-tabs">
      <ui-tab-pane label="单笔转账查询" name="transferSingleQry"></ui-tab-pane>
      <ui-tab-pane label="批量转账查询" name="transferBatchQry"></ui-tab-pane>
    </ui-tabs>
    <ui-form :rules="rules" :model="form" ref="form" class="query-form">
      <!-- 付款账户 -->
      <ui-form-item prop="acNo">
        <ui-input class="query-form_select" placeholder="请输入" v-model="form.acNo" @input="checkAcNo">
          <ui-select :popper-append-to-body="false" slot="prepend" v-model="form.acNoType" placeholder="请选择">
            <ui-option v-for="(item, value, index) in $msg('AcNoTypeDict')" :key="index" :label="item" :value="item" />
          </ui-select>
        </ui-input>
      </ui-form-item>
      <!-- 交易状态 -->
      <ui-form-item prop="collectAndPay">
        <ui-tooltip class="item" effect="dark" content="交易状态" placement="top">
          <ui-select :popper-append-to-body="false" v-model="form.collectAndPay" placeholder="交易状态">
            <ui-option v-for="(item, value, index) in $msg('dealStateDict')" :key="index" :label="item" :value="value"></ui-option>
          </ui-select>
        </ui-tooltip>
      </ui-form-item>
      <!-- 交易日期 -->
      <ui-form-item prop="date">
        <ui-date-picker
          :clearable="false"
          v-model="form.date"
          type="daterange"
          start-placeholder="开始日期"
          range-separator="~"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          :default-time="['00:00:00', '23:59:59']"
          :picker-options="pickerOptions"
          @change="changeDate"
        ></ui-date-picker>
      </ui-form-item>
      <!-- 交易金额 -->
      <ui-form-item prop="amount">
        <vx-input-amount-range
          @getValues="
            (range) => {
              form.amount = range;
            }
          "
          :minValue="form.amount.min"
          :maxValue="form.amount.max"
        ></vx-input-amount-range>
      </ui-form-item>
      <ui-form-item>
        <ui-button size="large" class="default-btn" @click="$refs['form'].resetFields()">重置</ui-button>
        <ui-button size="large" class="primary-btn" @click="searchCall">查询</ui-button>
      </ui-form-item>
    </ui-form>
    <!-- 查询信息结果 -->
    <ui-table :data="transfQryList" v-loading="isLoading">
      <ui-table-column key="serialNum" prop="serialNum" label="交易流水" width="180">
        <template slot-scope="scope">{{ scope.row.serialNum }}</template>
      </ui-table-column>
      <ui-table-column key="PayerAcNo" prop="PayerAcNo" label="付款账号" :show-overflow-tooltip="true" width="220">
        <template slot-scope="scope">{{ scope.row.PayerAcNo | formatStringFilter }}</template>
      </ui-table-column>
      <ui-table-column key="PayerAcName" prop="PayerAcName" label="付款名称" :show-overflow-tooltip="true" width="110"></ui-table-column>
      <!-- 付款总金额 -->
      <ui-table-column key="amount" prop="amount" label="付款金额（元）" min-width="140" align="right">
        <template slot-scope="scope">{{ scope.row.amount | numberFilter(2) }}</template>
      </ui-table-column>
      <ui-table-column key="TotalFee" prop="TotalFee" label="手续费（元）" min-width="120" align="right">
        <template slot-scope="scope">{{ scope.row.TotalFee | numberFilter(2) }}</template>
      </ui-table-column>
      <ui-table-column key="PayeeAcNo" prop="PayeeAcNo" label="收款账号" width="220">
        <template slot-scope="scope">{{ scope.row.PayeeAcNo | formatStringFilter }}</template>
      </ui-table-column>
      <ui-table-column key="PayeeAcName" prop="PayeeAcName" label="收款名称" width="220"></ui-table-column>
      <ui-table-column key="BankName" prop="BankName" label="收款银行" width="180"></ui-table-column>
      <ui-table-column key="remitType" prop="remitType" label="汇出类型" width="120">
        <template slot-scope="scope">{{ $msg('remitTypeDict')[scope.row.remitType] }}</template>
      </ui-table-column>
      <ui-table-column key="TransferDate" prop="TransferDate" label="交易时间" min-width="150">
        <template slot-scope="scope">{{ scope.row.TransferDate | dateFilter(undefined, 'YYYY-MM-DD HH:mm') }}</template>
      </ui-table-column>
      <ui-table-column key="dealState" prop="dealState" label="交易状态" width="120">
        <template slot-scope="scope">
          <span>{{ $msg('dealStateDict')[scope.row.dealState] }}</span>
        </template>
      </ui-table-column>
      <ui-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <ui-button @click.native.prevent="goDetail(scope.row)" type="text">详情</ui-button>
          <!-- 汇出类型为次日汇出，交易状态为待审核或待银行受理时，展示撤销按钮-->
          <ui-button
            v-if="(scope.row.remitType == 2 && scope.row.dealState == 1) || (scope.row.remitType == 2 && scope.row.dealState == 9)"
            @click.native.prevent="showUndoDialog(scope.row, 'repeal')"
            type="text"
            >撤销</ui-button
          >
          <ui-button v-if="scope.row.dealState == 3" @click.native.prevent="showUndoDialog(scope.row, 'edit')" type="text">修改</ui-button>
        </template>
      </ui-table-column>
    </ui-table>
    <!-- 分页 -->
    <ui-pagination
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      :layout="layout"
      :page-sizes="pageSizeList"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </ui-pagination>
    <vx-tips>
      <p>1、本功能适用于企业从已加挂我行企业网银账户向他行进行转账。</p>
      <p>2、跨行转账的服务时间以人民银行支付系统服务时间为准，目前小额支付系统提供7*24小时服务，大额支付系统提供5*8小时服务（9：00-17：00）</p>
    </vx-tips>
    <!-- 撤销弹框 -->
    <vx-dialog
      :loading="diagLoading"
      message="确定撤销这笔交易吗？"
      v-model="showConf"
      @confirm="undoTransfer"
      @cancel="transferData = null"
    ></vx-dialog>
    <!-- 撤销结果弹框 -->
    <vx-dialog auto-hide :icon="undoResIcon" :message="undoResMsg" v-model="showSure"></vx-dialog>
  </ui-container>
</template>

<script>
import transferRemitApi from '@/api/transferRemit';
import pagination from '@/common/mixin/pagination.js'; // 混入/分页
import shortcuts from '@/utils/pickerOptions.js'; // picker日期配置
import { dateUtil } from '@csii/vx-util';
import validate from '@/utils/validate';
let startTime = ''; // 开始日期
let endTime = ''; // 结束日期
let timer = '';
export default {
  mixins: [pagination],
  data() {
    return {
      // 控制字段------------------------
      activeName: 'transferSingleQry', // 转账标签
      showConf: false, // 撤销弹框是否显示
      showSure: false, // 撤销结果弹框是否显示
      undoResIcon: 'warning', // 撤销结果弹框图标
      // 表单提交数据---------------------
      form: {
        collectAndPay: this.$msg('dealStateDict')[1],
        acNo: '',
        acNoType: this.$msg('AcNoTypeDict')[0],
        // 默认展示近一个月
        date: [dateUtil.changeDate('-1M', '', 'YYYY-MM-DD'), dateUtil.getDate('', '', 'YYYY-MM-DD')],
        amount: {
          min: '',
          max: '',
        }, // 金额
      },
      // 表单校验规则---------------------
      rules: {
        date: [
          { required: false, message: '请选择日期', trigger: 'blur' },
          { validator: validate.dateRangeRule, dateSpan: '3M', dateRange: '-3y', trigger: 'blur' },
        ],
        amount: [{ validator: validate.moneyRangeRule, trigger: 'change' }],
      },
      // 日期显示选择
      pickerOptions: shortcuts(),
      // 接口响应数据---------------------
      transfQryList: [],
      transferData: null,
      undoResMsg: '',
      isLoading: false,
      diagLoading: false,
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    // 切换tab
    handleClick(tab) {
      this.$router.replace({
        name: 'transferRemit-transTransaction-' + tab.name,
      });
    },
    // 快捷方式 - 改变日期
    changeDate(val) {
      startTime = val[0];
      endTime = val[1];
      this.searchList();
    },
    // 查询按钮提交
    async searchList() {
      try {
        this.isLoading = true;
        let res = await transferRemitApi.getTabledata({
          ...this.form,
          type: 'single',
          startTime: startTime,
          endTime: endTime,
        });
        this.transfQryList = res.List;
        this.total = Number(res.TotalCount);
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.isLoading = false;
      }
    },
    goDetail(val) {
      this.setData({
        payerInfo: val,
      });
      // 单笔转账详情
      this.$router.push({ name: 'transferRemit-transTransaction-transferSingleDetail' });
    },
    // 帐号只能输入数字校验
    checkAcNo(value) {
      this.form.acNo = value.replace(/[^\d]/g, '');
    },
    showUndoDialog(data, flag) {
      // 撤销
      if (flag === 'repeal') {
        this.transferData = data;
        this.showConf = true;
      } else {
        // 修改
        this.setData({
          ...data,
          dealName: 'singleTransferPre',
        });
        this.$router.push({
          name: 'transferRemit-singleTransfer-singleTransferPre',
          query: {
            flag: true,
          },
        });
      }
    },
    // 撤销操作确认
    async undoTransfer() {
      // 撤销处理
      try {
        this.diagLoading = true;
        let res = await transferRemitApi.transferUndo(this.transferData);
        if (res.status === '0') {
          this.undoResMsg = '撤销成功';
          this.undoResIcon = 'success';
          // 弹框三秒后消失,再去查询列表
          timer = setTimeout(() => {
            this.searchList();
          }, 3000);
        } else {
          this.undoResMsg = '撤销失败';
          this.undoResIcon = 'warning';
        }
        // 展示自动消失弹框
        this.showSure = true;
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.diagLoading = false;
      }
    },
  },
  beforeDestroy() {
    clearTimeout(timer);
  },
};
</script>
